<template>
	<view class="col3">
		<view class="xilu_goods_group">
			<template v-for="(vo, keys) in classOnceList">
				<view class="xilu_goods_card" @tap="courseDetail(vo.id)">
					<image :src="vo.xilufitness_urls.wrap_image" mode="aspectFill" class="xilu_goods_img"></image>
					<view class="xilu_goods_info">
						<view class="goods_title m-ellipsis">{{ vo.wrap_name || '' }}</view>
						<view class="goods_price">￥{{ vo.wrap_price || '0' }}</view>
					</view>
					<view class="xilu_goods_btn_box">
						<text class="btn-text">立即购买</text>
						<!-- <view class="btn-divider"></view>
						<text class="btn-plus">+</text> -->
					</view>
				</view>
			</template>
		</view>
	</view>
</template>
<script>
	export default {
		name: "class-once",
		data() {
			return {

			};
		},
		props: {
			classOnceList: [Array]
		},
		methods: {
			//课程详情
			courseDetail(id) {
				this.$api.navigate('../../pages/package_detail/package_detail?id=' + id)
			}
		},
		mounted() {
			// console.log(this.classOnceList);
		}



	}
</script>

<style lang="scss" scoped>
	.xilu_goods_group {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 24rpx 24rpx;
		padding: 20rpx 0;
	}

	.xilu_goods_card {
		width: 100%;
		background: #E8EEFE;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.13);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 22rpx 0 18rpx 0;
		box-sizing: border-box;
		transition: box-shadow 0.2s;
	}

	.xilu_goods_card:active {
		box-shadow: 0 6rpx 20rpx rgba(255, 215, 0, 0.18);
	}

	.xilu_goods_img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 14rpx;
		background: #333;
		display: block;
		margin: 0 auto;
		object-fit: cover;
	}

	.xilu_goods_info {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 18rpx;
		margin-bottom: 10rpx;
		width: 300rpx;
	}

	.goods_title {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
		text-align: center;
		margin-bottom: 6rpx;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goods_price {
		color: #ffd700;
		font-size: 26rpx;
		font-weight: 600;
		text-align: center;
	}

	.xilu_goods_btn_box {
		background: #FFCF00;
		color: #FF6105;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160rpx;
		height: 50rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
		margin: 0 auto;
		margin-top: 10rpx;
		box-sizing: border-box;
	}

	.btn-text {
		padding: 0 16rpx;
		letter-spacing: 2rpx;
	}

	.btn-divider {
		width: 2rpx;
		height: 32rpx;
		background: #fff;
		opacity: 0.3;
	}

	.btn-plus {
		padding: 0 22rpx;
		font-size: 36rpx;
		font-weight: 400;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>